<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2024-08-21 10:00:44
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-04-03 14:32:01
 * @FilePath: \vue-project\src\views\AboutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="about">
    <h1 class="title">This is an about page</h1>
    <div class="block-box">
      <ImageList></ImageList>
    </div>

    <h1 class="title">图片加载组件 懒加载 加载失败 文本显示</h1>
    <myImg></myImg>

    <h1 class="title">ajax请求 控制并发 测试</h1>
    <el-button type="primary" @click="ajaxFn">测试</el-button>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import myImg from '@/views/component/MyImg.vue'
import ImageList from '@/views/component/ImageList.vue'

// ajax请求 控制并发   handQueue(Array(100).fill(0))
const handQueue = (reqs) => {
  reqs = reqs || []
  const requestQueue = (concurrency) => {
    concurrency = concurrency || 6 // 最大并发数
    const queue = [] // 请求池
    let current = 0

    const dequeue = () => {
      while (current < concurrency && queue.length) {
        current++
        const requestPromiseFactory = queue.shift() // 出列
        requestPromiseFactory()
          .then(() => {
            // 成功的请求逻辑
          })
          .catch((error) => {
            // 失败
            console.log(error)
          })
          .finally(() => {
            console.log(queue)
            current--
            dequeue()
          })
      }
    }

    return (requestPromiseFactory) => {
      queue.push(requestPromiseFactory) // 入队
      dequeue()
    }
  }

  const enqueue = requestQueue(4)

  for (let i = 0; i < reqs.length; i++) {
    enqueue(() => axios.get('https://127.0.0.1/api/test' + i))
  }
}

const ajaxFn = () => {
  handQueue(Array(100).fill(0))
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.about {
  $height: 60px;
  .title {
    height: $height;
    line-height: $height;
  }
}
</style>
